
<template>
  <div class="cloude-box" ref='vantaRef'>
  </div>
</template>
 
<script>
import * as THREE from 'three'
import BIRDS from 'vanta/src/vanta.clouds'
export default {
  mounted() {
    this.vantaEffect = BIRDS({
      el: this.$refs.vantaRef,
      THREE: THREE
    })
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy()
    }
  }
}
</script>

<style scoped>
.cloude-box{
	width: 100%;
	height: 100%;
}
</style>

